<template>
    <!-- <BingTu /> -->
    <div class="row">
        <div class="chart">
            <ShiDuanZheXianTu :config="config" />
        </div>
        <div class="chart">
            <BingTu :config="config" />

        </div>
    </div>

    <div class="row">
        <div class="chart">
            <ZheXianTu :config="config" />
        </div>
        <div class="chart">
            <!-- <JingXiangTu :config="config" /> -->
            <ZhuXingTu :config="config" />
        </div>
    </div>


    <!-- <div class="row">
        <div class="chart">
            <ZhuXingTu :config="config" />
        </div>
        <div class="chart">
            <BingTu :config="config" />
        </div>
    </div> -->
</template>

<script setup>
import { ref } from 'vue';
import BingTu from './components/BingTu.vue';
import ShiDuanZheXianTu from './components/ShiDuanZheXianTu.vue';
import ZheXianTu from './components/ZheXianTu.vue';
import ZhuXingTu from './components/ZhuXingTu.vue';
import JingXiangTu from './components/JingXiangTu.vue';
import theme from './theme/index.json'
// Global.animate = false ; // 关闭默认动画
// Global.colors = [ 'red', 'blue', 'yellow' ]

const config = ref({
    // theme: 'dark',
    // theme: 'light',
    theme: theme,
    // theme: 'classicDark',
    // theme: 'academy',
    // theme,
    legend: {
    },
    // scale: {
    //     color : { palette: 'pastel1' }
    // },
    height: 600,
})

</script>

<style scoped>

.chart {
    width: 100%;
}
.row {
    display: flex;
    flex: 1 1 1;
    width: 100%;
    height: 600px;
}

</style>